<template>
<div class="header_Table">
  <div class="select">
  项目：
  <el-select v-model="valueXM" 
    clearable filterable placeholder="请选择或模糊搜索"  class="m-2" >
    <el-option
      v-for="item in projectOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
  
 </div>



 <div class="select">
  专业：
  <el-select clearable v-model="valueZY" filterable class="m-2" >
    <el-option
      v-for="item in [{
        value:'管道',
        label:'管道'
      }]"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
  
 </div>


 <div class="select">
  项目主项：

  <el-select-v2
    v-model="valueMajor"
    style="width: 240px"
    clearable
    filterable
    
    :options="majorAllArr"
   
    placeholder="请选择项目主项"
  />
 </div>


 <div class="select">
  查询：
  <el-select  v-model="valueType" filterable class="m-2" >
    <el-option
      v-for="item in [
        {
          value:'类型',
          label: '类型',
        },
        {
          value:'管线',
          label: '管线',
        },
      ]"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
  
 </div>

</div>

<div v-if="showTP" class="bofy_total_table">
  
  <div class="table_info">
   


    <el-popover
    placement="bottom"
    title="选择导出类型"
    :width="265"
    trigger="hover"
    
  >
    <template #reference>
      <el-button :icon="Download" class="position_button_s"  type="primary">导出</el-button>
    </template>

    <el-button :icon="Message"  @click="DCTable2"  class="position_button_s"  type="primary">导出概览</el-button>

    <el-button :icon="Document" @click="DCTable" class="position_button_s"  type="primary">导出详情</el-button>
  </el-popover>

    <el-table
      :data="tableDataType"
      height="650px"
      style="width: 100%"
      border
      :expand-row-keys="expandArrType"
      @expand-change="expandChangeType"
      :header-cell-style="{ background: '#fafbfc', color: '#333333' }"
      :row-key="
          (row) => {
            return row.encoding ;
          }
        "
    >
    <el-table-column type="expand">
      <template #default>
       <div class="table_setion_N">
        <div class="zkDetail">
          <el-icon><List /></el-icon>
          <span>展开详情：</span>
        </div>
        <el-table
      :data="rowsDataType"
      max-height="350px"
      border
     >
   

       <el-table-column
       width="150"
       prop="bmName"
        label="管线号"
      ></el-table-column>

      <el-table-column
      width="100"
        prop="num"
        label="数量"
      >
      <template #default="props">
      {{props.row.num}} {{ props.row.unit }}
      </template>
    </el-table-column>


    <el-table-column
    width="100"
        prop="pipingClass"
        label="管道等级"
      >
    
      <template #header>
                              <div class="filter_item">
                                <span>管道等级</span>
                                <filterCom :options="allpipingClass" @chooseItem="choosepipingClass"></filterCom>
                              </div>
                            </template>
    </el-table-column>


 </el-table>
 <div class="pageF2">
      <el-pagination
        v-model:current-page="pageNumDetailType"
        v-model:page-size="pageSizeDetailType"
        :page-sizes="[20, 50, 100]"
        background
        layout="total, prev, pager, next"
        :total="totalDetailType"
        @size-change="handleSizeChangeDetailType"
        @current-change="handleCurrentChangeDetailType"
      />
    </div>


       </div>
      </template>
    </el-table-column>  

       <el-table-column
       width="150"
       prop="major"
        label="主项"
      ></el-table-column>

      <el-table-column
      width="150"
     
        prop="descriptionZh"
        label="描述（中文）"
      >
      <template #header>
                              <div class="filter_item">
                                <span>描述（中文）</span>
                                <filterCom :options="allDescriptionZh" @chooseItem="choosedescriptionZh"></filterCom>
                              </div>
                            </template>
      <template #default="props">
        <el-tooltip
        class="box-item"
        effect="dark"
        :content="props.row.descriptionZh"
        placement="top-start"
      >
        <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{{props.row.descriptionZh}}</div>
      </el-tooltip>
      </template>
    </el-table-column>

      <el-table-column
      width="300"
   
        prop="descriptionEn"
        label="描述（英文）"
      >
      <template #header>
 <div class="filter_item">
                                <span>描述（英文）</span>
        <filterCom :options="allDescriptionEN" @chooseItem="choosedescriptionEn"></filterCom>
                              </div>
                            </template>
      <template #default="props">
        <el-tooltip
        class="box-item"
        effect="dark"
        :content="props.row.descriptionEn"
        placement="top-start"
      >
        <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{{props.row.descriptionEn}}</div>
      </el-tooltip>
      </template>
    </el-table-column>

    <el-table-column
      width="100"
        prop="size1"
        label="尺寸1"
      >
      <template #header>
 <div class="filter_item">
                                <span>尺寸1</span>
        <filterCom :options="size1Option" @chooseItem="chooseSize1"></filterCom>
                              </div>
                            </template>
    </el-table-column>

      <el-table-column
      width="100"
        prop="size2"
        label="尺寸2"
      >
    
    
      <template #header>
 <div class="filter_item">
                                <span>尺寸2</span>
        <filterCom :options="size2Option" @chooseItem="chooseSize2"></filterCom>
                              </div>
                            </template>
    </el-table-column>


      <el-table-column
      width="100"
        prop="num"
        label="数量"
      >
      <template #default="props">
      {{props.row.num}} {{ props.row.unit }}
      </template>
    </el-table-column>


      <el-table-column
      width="150"
        prop="encoding"
        label="编码"
      >
      <template #default="props">
        <el-tooltip
        class="box-item"
        effect="dark"
        :content="props.row.encoding"
        placement="top-start"
      >
        <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{{props.row.encoding}}</div>
      </el-tooltip>
      </template>
    </el-table-column>
 </el-table>

    <div class="pageF">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[20, 50, 100]"
        background
        layout="total, sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>


  <div class="charts_left">
     <div class="position_select">
      <el-select-v2
      @change="changeAS"
      style="width: 80px;"
    v-model="GZdATA"
    :options="[
      {
        value:'pipes',
        label:'管子',
      },
      {
        value:'fittings',
        label:'管件',
      },
      {
        value:'bolts',
        label:'螺栓',
      },
      {
        value:'gaskets',
        label:'垫片',
      },
    ]"
    placeholder="请选择"
    size="small"
  />

     </div>

    <Echart id="type" :data="TypeData"></Echart>

  </div>
</div>

<GX v-if="showGX" :valueXM="valueXM" :valueMajor="valueMajor"></GX>

</template>

<script setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  ChatDotRound,
  Star,
  Avatar,
  MessageBox,
  Switch,
  Right,
  OfficeBuilding,
  UserFilled,
  Document,
  Download,
} from "@element-plus/icons-vue";
import { ElNotification } from 'element-plus'
import GX from './GX.vue'
import filterCom from "../components/filter.vue";
import Echart from '../../src/components/echart.vue'
import { nextTick, onMounted, ref, watch } from "vue";
import { MBInfoData,selectSize1,selectSize2 ,selectMajorData,MBInfoDetailData2,MBInfoData2,MBInfoDetailData,EchartType,getZH,getEN,getClass,getProject,getExportData,getExportData3} from "../https/api/table.js";
let total = ref(0);

let valueXM = ref('')

watch(valueXM,()=>{
   console.log(valueXM.value)
})


let projectOptions= ref([])
let valueZY = ref('管道')
let valueMajor = ref(null)
let valueType = ref('类型')



let GZdATA = ref('pipes')
watch(valueMajor,()=>{

  remoteMethod(valueMajor.value)
})


let changeAS = (val) => { 

  console.log(val)
}

watch(GZdATA,()=>{
  GZdATA.value == 'pipes' ?  TypeData.value.title.text = `管子数据概览` : ''
  GZdATA.value == 'fittings' ?  TypeData.value.title.text = `管件数据概览` : ''
  GZdATA.value == 'bolts' ?  TypeData.value.title.text = `螺栓数据概览` : ''
  GZdATA.value == 'gaskets' ?  TypeData.value.title.text = `垫片数据概览` : ''
  getEchartsType({projectCode:valueXM.value,major:valueMajor.value,type:GZdATA.value})
})


let showTP = ref(true)
let showGX = ref(false)
watch(valueType,()=>{
  if(valueType.value == '类型'){
    showGX.value = false
    showTP.value = true
  }else if(valueType.value == '管线'){
    showGX.value = true
    showTP.value = false
  }
})

let loading = ref(false)

let expandedRowsCommon = ref({})
let expandArrType = ref([]);
let expandChangeType = (expandedRows) => {
  if (!expandArrType.value.includes(expandedRows.encoding)) {
    expandArrType.value = [];
    expandArrType.value.push(expandedRows.encoding);
  } else {
    expandArrType.value = [];
  }
  expandedRowsCommon.value = {...expandedRows}

  // 获取管道等级select
  getsELECTpipingClass({projectCode:valueXM.value,major:valueMajor.value,})
  getRowData({
    ...expandedRows,
    
    projectCode:valueXM.value,major:valueMajor.value,
    pageNum: pageNumDetailType.value,
    pipingClass:pipingClass.value,
pageSize: pageSizeDetailType.value,  
  })

  // getEchartsType({})
}


let allpipingClass = ref([])
let choosepipingClass = (val)=>{
  pipingClass.value = val;

}

let getsELECTpipingClass =async (data) => { 
  let res = await getClass(data)
  allpipingClass.value = res.data.map((v)=>{
    return {
      value:v.value,
      label:v.value
    }
  })
}

let getEchartsType = async (data) => { 
  let res = await EchartType(data)
TypeData.value.yAxis.data = res.data.map(v=>v.name)
TypeData.value.series[0].data = res.data.map(v=>v.value)
}

let rowsDataType = ref([])
let pageSizeDetailType = ref(10)
let pageNumDetailType = ref(1)
let totalDetailType = ref(0)
let getRowData = async (data) => {
let res = await MBInfoDetailData(data)

rowsDataType.value = res.data
totalDetailType.value = res.total
}


let handleSizeChangeDetailType = (val) => {
  pageSizeDetailType.value = val
  getRowData({
    ...expandedRowsCommon.value,
    projectCode:valueXM.value,major:valueMajor.value,
    pageNum: pageNumDetailType.value,
    pipingClass:pipingClass.value,
pageSize: pageSizeDetailType.value,  
  })

}

let handleCurrentChangeDetailType = (val) => {
  pageNumDetailType.value = val
  getRowData({
    ...expandedRowsCommon.value,
    projectCode:valueXM.value,major:valueMajor.value,
    pageNum: pageNumDetailType.value,
    pipingClass:pipingClass.value,
pageSize: pageSizeDetailType.value,  
  })
}


let size1Data = ref([])
let chooseSize1 = (val) => {
  size1Data.value = val
}

watch(showGX,()=>{
  console.log(showGX.value)
  nextTick(()=>{
    // document.querySelector('.charts_left').style.height = `${window.innerHeight - 160}px`
    document.querySelector('.charts_left').style.height  = '650px'
  })
})

let chooseSize2 = (val) => {
  size2Data.value = val
}

let TypeData = ref( {
  dataZoom: [
            {
               start:0,//默认为0
               end: 100,//默认为100
               type: 'slider',
               maxValueSpan:50,//显示数据的条数(默认显示10个)
               show: true,
               yAxisIndex: [0],
               handleSize: 0,//滑动条的 左右2个滑动条的大小
               height: '30%',//组件高度
              //  left: 0, //左边的距离
               right: 0,//右边的距离
               top: 0,//上边边的距离
            
               showDataShadow: false,//是否显示数据阴影 默认auto
               showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
               realtime:true, //是否实时更新
               filterMode: 'filter',
               yAxisIndex: [0,1],//控制的y轴
            },
            //滑块的属性
            {
              zoomOnMouseWheel: false,  // 关闭滚轮缩放
            moveOnMouseWheel: true, // 开启滚轮平移
            moveOnMouseMove: true,  // 鼠标移动能触发数据窗口平移 
              //  zoomLock: true,
               type: 'inside',
               show: true,
               yAxisIndex: [0,1],
               start: 50,//默认为1
               end: 60,//默认为100
            },
        ],

  title: {
    x:'center',
    text: '管子数据概览',
    textStyle:{
      color:'#0081ff',
      fontWeight:'bolder',
    }
  },
  tooltip: {
    // formatter: ' {b} <br/> {c}',
    formatter: function (params) {
    var relVal = params[0].name
    for (var i = 0, l = params.length; i < l; i++) {
      console.log(params[i])
      if(params[i].axisValueLabel.includes('管子')){
        relVal += '<br/>' + params[i].marker + params[i].value + '米'
      }else{
        relVal += '<br/>' + params[i].marker + params[i].value + '个'
      }
    
    }
    return relVal
  },

    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    show:false,
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    axisLabel:{ 
      interval: 0,
      rotate: 20, 
      formatter: function (value) {
                    if (value.length > 8) {
                      return `${value.slice(0, 8)}...`;
                    }
                    return value;
                  } 
    },
    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
  },
  series: [
    {
      name: '2011',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, 630230],
      itemStyle: {
            normal: {
　　　　　　　　//这里是重点
                color: function(params) {
                  var colorList = ['#74c4dc', '#5973c1','#68b676','#ed6969','#fbc85f' ,'#0081ff']; 
             return colorList[params.dataIndex % colorList.length];
                }
            }
        }

    },
 
  ]
})


let selectMajorOptions = ref([])
let remoteMethod = (query) => {
  
  loading.value = true
 if (query) {
     new Promise((resolve) => {
 
       selectMajorOptions.value = majorAllArr.value.filter((item) => {

        return item.label.toLowerCase().includes(query.toLowerCase())
      })
        resolve(selectMajorOptions.value)
       }).then(() => {
      
       loading.value = false
      })

      
  } else {
    selectMajorOptions.value = []
    loading.value = false
  }
}

let handleSizeChange = (val) => {
  pageSize.value = val
  getMBInfoData({
    size1:size1Data.value,
    size2:size2Data.value,
    major:valueMajor.value,
    projectCode:valueXM.value,
    pageNum: pageNum.value,
    descriptionZh:descriptionZh.value,
    descriptionEn:descriptionEn.value,
    pageSize: pageSize.value,
  });

}

let handleCurrentChange = (val) => {
  pageNum.value = val
  getMBInfoData({
    size1:size1Data.value,
    size2:size2Data.value,
    major:valueMajor.value,
    projectCode:valueXM.value,
    pageNum: pageNum.value,
    descriptionZh:descriptionZh.value,
    descriptionEn:descriptionEn.value,
    pageSize: pageSize.value,
  });
}

let pageNum = ref(1);
let pageSize = ref(20);

let tableDataType = ref([])
let getMBInfoData = async (data) => {
  let res = await MBInfoData(data);
  if (res.code == 200) {

    tableDataType.value = res.data
    total.value = res.total
  }
};

let majorAllArr = ref([])
let getSelectMajor = async (data) => {
  let res = await selectMajorData(data);
  if (res.code == 200) {
    majorAllArr.value = res.data
   
    // valueMajor.value = res.data[0].value
    
  }
};





let allDescriptionZh = ref([])
let descriptionZh = ref([])
let choosedescriptionZh = (val) => {
  descriptionZh.value = val
}

let descriptionEn = ref([])
let choosedescriptionEn = (val) => {
  descriptionEn.value = val
}


let size2Data = ref([])

watch([descriptionZh,descriptionEn,size1Data,size2Data],()=>{
  
  getSelectdescriptionZh({projectCode:valueXM.value,major:valueMajor.value, size1:size1Data.value,
    size2:size2Data.value,
    descriptionZh:descriptionZh.value,
    descriptionEn:descriptionEn.value,queryType:'queryByLineId'})
  getSelectdescriptionEN({projectCode:valueXM.value,major:valueMajor.value, size1:size1Data.value,
    size2:size2Data.value,
    descriptionZh:descriptionZh.value,
    descriptionEn:descriptionEn.value,queryType:'queryByLineId'})
    getSize1Data({  major:valueMajor.value,
    projectCode:valueXM.value, size1:size1Data.value,
    size2:size2Data.value,
    descriptionZh:descriptionZh.value,
    descriptionEn:descriptionEn.value,queryType:'queryByLineId'})
    getSize2Data({  major:valueMajor.value,
    projectCode:valueXM.value, size1:size1Data.value,
    size2:size2Data.value,
    descriptionZh:descriptionZh.value,
    descriptionEn:descriptionEn.value,queryType:'queryByLineId'})
  getMBInfoData({
    size1:size1Data.value,
    size2:size2Data.value,
    major:valueMajor.value,
    projectCode:valueXM.value,
    pageNum: pageNum.value,
    descriptionZh:descriptionZh.value,
    descriptionEn:descriptionEn.value,
    pageSize: pageSize.value,
  });
})

let pipingClass = ref([])


watch([pipingClass],()=>{
  getRowData({
    ...expandedRowsCommon.value,
    projectCode:valueXM.value,major:valueMajor.value,
    pageNum: pageNumDetailType.value,
    pipingClass:pipingClass.value,
pageSize: pageSizeDetailType.value,  
  })
})


let getProjectAll =async (data) => {
  let res = await getProject(data)
  projectOptions.value = res.data.map(v=>{
    return {
      value:v.projectCode,
      label:v.projectName
    }

  })
  // valueXM.value = projectOptions.value[0].value

  valueXM.value = ''
}


let size1Option = ref([])
let getSize1Data =async (data) => {
  let res = await selectSize1(data)
  size1Option.value = res.data
}

let size2Option = ref([])
let getSize2Data =async (data) => {
  let res = await selectSize2(data)
  size2Option.value = res.data.map(v=>{
    return {
      value:v&&v.value,
      label:v&&v.value
    }
  })
  console.log(size2Option.value)
}


watch(valueMajor,()=>{
  getSize1Data({  major:valueMajor.value,
    projectCode:valueXM.value,
    size1:size1Data.value,
    size2:size2Data.value,
    descriptionZh:descriptionZh.value,
    descriptionEn:descriptionEn.value,queryType:'queryByLineId'
  })
    getSize2Data({  major:valueMajor.value,
    projectCode:valueXM.value, size1:size1Data.value,
    size2:size2Data.value,
    descriptionZh:descriptionZh.value,
    descriptionEn:descriptionEn.value,queryType:'queryByLineId'})
    // 获取表格1内容
    getMBInfoData({
    size1:size1Data.value,
    size2:size2Data.value,
    major:valueMajor.value,
    projectCode:valueXM.value,
    pageNum: pageNum.value,
    descriptionZh:descriptionZh.value,
    descriptionEn:descriptionEn.value,
    pageSize: pageSize.value,
  });
  getEchartsType({projectCode:valueXM.value,major:valueMajor.value,type:GZdATA.value})
  getSelectdescriptionZh({projectCode:valueXM.value,major:valueMajor.value, size1:size1Data.value,
    size2:size2Data.value,
    descriptionZh:descriptionZh.value,
    descriptionEn:descriptionEn.value,queryType:'queryByLineId'})
  getSelectdescriptionEN({projectCode:valueXM.value,major:valueMajor.value, size1:size1Data.value,
    size2:size2Data.value,
    descriptionZh:descriptionZh.value,
    descriptionEn:descriptionEn.value,queryType:'queryByLineId'})

})


onMounted(() => {
  // document.querySelector('.charts_left').style.height = `${window.innerHeight - 160}px`
  document.querySelector('.charts_left').style.height  = '650px'
  console.log(window.innerHeight)
  getProjectAll({})
  // getSelectMajor({})


  // // 获取表格1内容
  // getMBInfoData({
  //   pageNum: pageNum.value,
  //   descriptionZh:descriptionZh.value,
  //   descriptionEn:descriptionEn.value,
  //   pageSize: pageSize.value,
  // });
  // getEchartsType()
  // getSelectdescriptionZh({})
  // getSelectdescriptionEN({})
  /***********/
});



let getSelectdescriptionZh =async (data) => { 
  let res = await getZH(data)
  allDescriptionZh.value = res.data.map(v=>{
    return {
      value: v.value,
      label: v.value
    }
  })
}

let allDescriptionEN = ref([])
let getSelectdescriptionEN =async (data) => { 
  let res = await getEN(data)
  allDescriptionEN.value = res.data.map(v=>{
    return {
      value: v.value,
      label: v.value
    }
  })
}




watch(valueXM,()=>{
  console.log(valueXM.value)
  if(valueXM.value){
    getSize1Data({  major:valueMajor.value,
    projectCode:valueXM.value, size1:size1Data.value,
    size2:size2Data.value,
    descriptionZh:descriptionZh.value,
    descriptionEn:descriptionEn.value,queryType:'queryByLineId'})
    getSize2Data({  major:valueMajor.value,
    projectCode:valueXM.value, size1:size1Data.value,
    size2:size2Data.value,
    descriptionZh:descriptionZh.value,
    descriptionEn:descriptionEn.value,queryType:'queryByLineId'})
  getSelectMajor({projectCode:valueXM.value})
 

  // 获取表格1内容
  getMBInfoData({
    projectCode:valueXM.value,
    major:valueMajor.value,
    pageNum: pageNum.value,
    descriptionZh:descriptionZh.value,
    descriptionEn:descriptionEn.value,
    pageSize: pageSize.value,
  });
  getEchartsType({projectCode:valueXM.value,major:valueMajor.value,type:GZdATA.value})
  getSelectdescriptionZh({projectCode:valueXM.value,major:valueMajor.value, size1:size1Data.value,
    size2:size2Data.value,
    descriptionZh:descriptionZh.value,
    descriptionEn:descriptionEn.value,queryType:'queryByLineId'})
  getSelectdescriptionEN({projectCode:valueXM.value,major:valueMajor.value, size1:size1Data.value,
    size2:size2Data.value,
    descriptionZh:descriptionZh.value,
    descriptionEn:descriptionEn.value,queryType:'queryByLineId'})
  }else{
    getSize1Data({  major:valueMajor.value,
    projectCode:valueXM.value, size1:size1Data.value,
    size2:size2Data.value,
    descriptionZh:descriptionZh.value,
    descriptionEn:descriptionEn.value,queryType:'queryByLineId'})
    getSize2Data({  major:valueMajor.value,
    projectCode:valueXM.value, size1:size1Data.value,
    size2:size2Data.value,
    descriptionZh:descriptionZh.value,
    descriptionEn:descriptionEn.value,queryType:'queryByLineId'})
  getSelectMajor({projectCode:valueXM.value})
 

  // 获取表格1内容
  getMBInfoData({
    size1:size1Data.value,
    size2:size2Data.value,
    major:valueMajor.value,
    projectCode:valueXM.value,
    pageNum: pageNum.value,
    descriptionZh:descriptionZh.value,
    descriptionEn:descriptionEn.value,
    pageSize: pageSize.value,
  });
  getEchartsType({projectCode:valueXM.value,major:valueMajor.value,type:GZdATA.value})
  getSelectdescriptionZh({projectCode:valueXM.value,major:valueMajor.value, size1:size1Data.value,
    size2:size2Data.value,
    descriptionZh:descriptionZh.value,
    descriptionEn:descriptionEn.value,queryType:'queryByLineId'})
  getSelectdescriptionEN({projectCode:valueXM.value,major:valueMajor.value, size1:size1Data.value,
    size2:size2Data.value,
    descriptionZh:descriptionZh.value,
    descriptionEn:descriptionEn.value,queryType:'queryByLineId'})
  }
  
},{immediate:true})


let DCTable =async () => { 
  ElNotification({
    title: '正在导出',
    message: '正在导出，请稍等.....',
    type: 'warning',
    duration:0,
  })
let res = await getExportData(
  {size1:size1Data.value,
    size2:size2Data.value,
    major:valueMajor.value,
    projectCode:valueXM.value,
    pageNum: pageNum.value,
    descriptionZh:descriptionZh.value,
    descriptionEn:descriptionEn.value,
    pipingClass:pipingClass.value,
    pageSize: pageSize.value,}
)

if(res.code = 200 ){
  ElNotification.closeAll()
     var x = new XMLHttpRequest();
    x.open(
      "GET",
      `http://10.6.70.105:8034${res.path}`,
      true
    );
    x.responseType = "blob";
    x.onload = function (e) {
      var url = window.URL.createObjectURL(x.response);
      var a = document.createElement("a");
      a.href = url;
      a.download = "料单详情（类型）";
      a.click();
    };
    x.send();
  }

}



let DCTable2 =async () => { 
  ElNotification({
    title: '正在导出',
    message: '正在导出，请稍等.....',
    type: 'warning',
    duration:0,
  })
let res = await getExportData3(
  {size1:size1Data.value,
    size2:size2Data.value,
    major:valueMajor.value,
    projectCode:valueXM.value,
    pageNum: pageNum.value,
    descriptionZh:descriptionZh.value,
    descriptionEn:descriptionEn.value,
    pipingClass:pipingClass.value,
    pageSize: pageSize.value,}
)

if(res.code = 200 ){
  ElNotification.closeAll()
     var x = new XMLHttpRequest();
    x.open(
      "GET",
      `http://10.6.70.105:8034${res.path}`,
      true
    );
    x.responseType = "blob";
    x.onload = function (e) {
      var url = window.URL.createObjectURL(x.response);
      var a = document.createElement("a");
      a.href = url;
      a.download = "料单概览（类型）";
      a.click();
    };
    x.send();
  }

}


</script>

<style lang="less" scoped>
.filter_item {
  display: flex;
  align-items: center;
  span {
    margin-right: 5px;
  }
}
.charts_left{
  position: relative;
  display: flex;
  width: 30%;
  height: 762px;
  align-items: center;
  justify-content: center;
  .position_select{
    z-index: 99;
    display: flex;
    align-items: center;
    left: 20px;
    top: 10px;
    position: absolute;
  }
 
}
.table_setion_N{
  padding: 15px 25px;
  .zkDetail{
    color: #0081ff;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bolder;
  }
}
.p_titel_list{
  font-size: 20px;
  font-weight: bold;
}
.bofy_total_table{
 
  
display: flex;
align-items: center;
justify-content: space-between;
.table_info{
  position: relative;
  width: 70%;
  .position_button_s{
    position: absolute;
    top: -20px;
    right: 20px;
  }
}
}


.table_info{
  /deep/  .el-table__cell{
    padding: 3px 0;
  }
}
/deep/ .m-2{
  width: 190px;
}

.header_Table{
  padding: 20px 30px;
  .select{
    color: #0081ff;
    
    margin-right: 14px;
  }
}
.header_Table{
  display: flex;
  align-items: center;
 
}
.table_info {
  padding: 20px;
}
.pageF {
  margin-top: 40px;
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
}
.pageF2{
  margin-top: 40px;
  width: 100%;
  
}




@media screen and (max-width: 1400px) {  
  .header_Table .select{
    font-size: 10px;
  }
  .m-2{
    width:100px;
  }
  .el-select-v2{
    width:130px!important;
  }
  // .bofy_total_table{
  //   align-items: normal;
  // }
  .charts_left .position_select{
 top: -36px;
  }
  .bofy_total_table{
    margin-top:30px;
  }
}  

</style>
